<template>
  <div class="EmergencyList">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item>应急事件</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <!-- 列表筛选 -->
      <filterTitle @query="query" @reset="reset" :form="form" labelWidth="140px" :formData="formData"
        @node-click="deptChoose">
        <el-form slot="filter" class="form" ref="form" :model="form" inline size="small" label-width="140px">
          <el-form-item :label="item.label + '：'" v-for="(item, index) in formData" :key="index" :prop="item.id">
            <LsdForm :compData="item" :form="form" />
          </el-form-item>
        </el-form>
      </filterTitle>
      <!-- 列表表格 -->
      <LsdTable slot="gjxm" @select="handleSelectionChange" :paginationAtrrs="paginationAtrrs"
        @pageChange="handleSizeChange" :compRef="table.compRef" ref="gjxm" :columns="table.columns" :title="table.title"
        :actions="table.actions" :tableData="table.tableData" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage"
        :isSelectFlag="table.isSelectFlag" :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick" />
    </div>
    <!-- 弹窗信息 -->
    <LsdDialog :dialogConfig="dialogConfig" @handleBtn="handleBtn" @close="close">
      <LsdDialogTitle slot="dialog" :titleConfig="titleConfig" :activeNames="activeNames">
        <DialogForm @changeEvent="ChangeResponseData" ref="formComponent" slot="slot1" :formConfig="formConfig" />
        <DialogForm ref="formComponent1" slot="slot2" @handlePreview="handlePreview" @removeTag="removeTag"
          @handleChange="handleChange" @handleRemove="handleRemove" @handleBeforeUpload="handleBeforeUpload"
          :formConfig="formConfig1" @handleNodeClick="handleNodeClick" />
        <DialogForm ref="formComponent2" slot="slot3" :formConfig="formConfig2" />
      </LsdDialogTitle>
    </LsdDialog>
    <!-- 灾情信息统计弹窗 -->
    <el-dialog title="灾情信息统计" :visible="previewVisible" width="60%" :before-close="previewhandleClose" class="zqxxtj">
      <DisasterInformation v-if="previewVisible" :id="currentId"></DisasterInformation>
    </el-dialog>
    <!-- 视频关联弹窗 -->
    <LsdDialog :dialogConfig="bdVideoDialog.dialogConfig" @handleBtn="handleBtn" @close="close1">
      <LsdDialogTitle slot="dialog" :titleConfig="bdVideoDialog.titleConfig" :activeNames="activeNames">
        <DialogForm ref="videoForm" slot="slot1" :formConfig="bdVideoDialog.formConfig" />
        <div slot="slot2">
          <DialogForm ref="videoForm1" :formConfig="bdVideoDialog.formConfig1" />
          <div class="flex videoDiv">
            <div><img src="@/assets/img/video.jpg" alt="" width="100%"></div>
            <div class="device">
              <div class="deviceMain">
                <div class="deviceTitle">视频资源列表</div>
                <div class="deviceSearch">
                  <el-input size="small" v-model="devicePlace" placeholder="" class="right">
                  </el-input>
                </div>
                <div class="videoTree">
                  <el-tree :props="props" :load="loadNode" lazy show-checkbox @check-change="handleCheckChange">
                  </el-tree>
                </div>
              </div>
            </div>
          </div>
          <LsdTable compRef="spmc" :columns="bdVideoDialog.formConfig1.table.columns"
            :tableData="bdVideoDialog.formConfig1.table.tableData" :tableAttr="bdVideoDialog.formConfig1.table.tableAttr"
            :isSequenceFlag="bdVideoDialog.formConfig1.table.isSequenceFlag" />
        </div>
      </LsdDialogTitle>
    </LsdDialog>
  </div>
</template>

<script>
import {
  SaveEmergencyEvent,
  listPageEmergencyEvent,
  EmergencyEventgetdeleteById,
  EmergencyEventgetById,
  EmergencyEventgetSubmit,
  EmergencyEventgetUpdById,
  EmergencyEventgetChangeResponseData
} from "@/api/EmergencyDisposal/yjsj.js";
import { getCityTree } from "@/api/EarlyWarningManagement/yjxxsj";
import { selectResponse } from "@/api/EmergencyDisposal/yjrb.js";
import { detailList } from "@/api/EarlyWarningManagement/yjtzd";
import { getDictByGroupEmergency, UploadFile, loadFile } from "@/api/common.js";
import { showTime } from "@/lib";
import DisasterInformation from "./components/DisasterInformation.vue";
export default {
  name: "EmergencyList",
  components: { DisasterInformation },
  data() {
    return {
      type: 0,
      previewVisible: false,
      currentId: "",
      multipleSelection: [],
      // 筛选信息
      formData: [

      ],
      formData1: [{
        elType: "input",
        id: "emergencyEvent",
        label: "应急事件",
        attrs: {
          value: "",
          size: "small",
          "collapse-tags": true,
          clearable: true

        }
      },
      {
        elType: "select",
        id: "eventCode",
        label: "事件类别",
        dic: "dic_sjlb",

        attrs: {
          value: "",
          size: "small",
          // clearable: true,
          filterable: true,
          clearable: true,
          "collapse-tags": true
        },
        options: []
      },
      {
        elType: "select",
        id: "eventLvCode",
        label: "事件级别",
        dic: "dic_sjjb",
        attrs: {
          value: "",
          clearable: true,
          size: "small",
          filterable: true,
          "collapse-tags": true
        },
        options: []
      },
      {
        elType: "input",
        id: "effectRange",
        label: "影响范围",
        attrs: {
          value: "",
          size: "small",
          clearable: true,
          filterable: true,
          "collapse-tags": true
        }
      },
      // {
      //   elType: "dateTimePicker",
      //   id: "occurrenceTime",
      //   label: "发生时间",
      //   attrs: {
      //     value: "",
      //     size: "small",
      //     clearable: true,
      //     type: "datetime",
      //     "value-format": "yyyy-MM-dd HH:mm:ss"
      //   }
      // },
      {
        elType: "dateTimePicker",
        id: "effectStartTime",
        label: "发生时间",
        attrs: {
          value: "",
          size: "small",
          type: "datetimerange",
          clearable: true,
          "start-placeholder": "开始日期",
          "end-placeholder": "结束日期",
          "value-format": "yyyy-MM-dd HH:mm:ss"
        }
      },
      {
        elType: "select",
        id: "infoSourceCode",
        label: "信息来源",
        dic: "dic_yjxxly",
        attrs: {
          value: "",
          size: "small",
          clearable: true,
          filterable: true,
          "collapse-tags": true
        },
        options: []
      },
      {
        elType: "select",
        id: "noticeId",
        label: "关联响应命令单",
        attrs: {
          value: "",
          size: "small",
          clearable: true,
          filterable: true,
          "collapse-tags": true
        },
        options: []
      },
      {
        elType: "select",
        id: "eventState",
        label: "状态",
        attrs: {
          value: "",
          size: "small",
          clearable: true,
          filterable: true,
          "collapse-tags": true
        },
        options: [
          { label: "编辑中", value: "0" },
          { label: "未处理", value: "1" },
          { label: "已处理", value: "2" }
        ]
      }],
      formData2: [{
        elType: "input",
        id: "emergencyEvent",
        label: "应急事件",
        attrs: {
          value: "",
          size: "small",
          "collapse-tags": true,
          clearable: true

        }
      },
      {
        elType: "select",
        id: "eventCode",
        label: "事件类别",
        dic: "dic_sjlb",

        attrs: {
          value: "",
          size: "small",
          // clearable: true,
          filterable: true,
          clearable: true,
          "collapse-tags": true
        },
        options: []
      },
      {
        elType: "select",
        id: "eventLvCode",
        label: "事件级别",
        dic: "dic_sjjb",
        attrs: {
          value: "",
          clearable: true,
          size: "small",
          filterable: true,
          "collapse-tags": true
        },
        options: []
      },
      {
        elType: "input",
        id: "effectRange",
        label: "影响范围",
        attrs: {
          value: "",
          size: "small",
          clearable: true,
          filterable: true,
          "collapse-tags": true
        }
      },
      // {
      //   elType: "dateTimePicker",
      //   id: "occurrenceTime",
      //   label: "发生时间",
      //   attrs: {
      //     value: "",
      //     size: "small",
      //     clearable: true,
      //     type: "datetime",
      //     "value-format": "yyyy-MM-dd HH:mm:ss"
      //   }
      // },
      {
        elType: "dateTimePicker",
        id: "effectStartTime",
        label: "发生时间",
        attrs: {
          value: "",
          size: "small",
          type: "datetimerange",
          clearable: true,
          "start-placeholder": "开始日期",
          "end-placeholder": "结束日期",
          "value-format": "yyyy-MM-dd HH:mm:ss"
        }
      },
      {
        elType: "select",
        id: "infoSourceCode",
        label: "信息来源",
        dic: "dic_yjxxly",
        attrs: {
          value: "",
          size: "small",
          clearable: true,
          filterable: true,
          "collapse-tags": true
        },
        options: []
      }
      ],
      // 表格信息
      table: {
        isSelectFlag: true, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "应急事件列表",
        actions: [
          // {
          //   id: "dialogVisible",
          //   text: "新增",
          //   type: "primary",
          //   btnAttr: { size: "small" }
          // },
          // {
          //   id: "ListAddyp",
          //   text: "研判",
          //   type: "",
          //   btnAttr: { size: "small" }
          // }
        ],
        tableData: [],
        columns: [
          {
            prop: "emergencyEvent",
            label: "应急事件",
            align: "left",
            "min-width": "230px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='width: 100%;' class='commonTableStyle'
                      {...{
                        on: {
                          click: () => {
                            this.detailList(row);
                          }
                        }
                      }}
                    >
                      {row.emergencyEvent}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "eventName",
            label: "事件类别",
            align: "center"
          },
          {
            prop: "eventLvName",
            label: "事件级别",
            align: "center"
          },
          {
            prop: "effectRange",
            label: "影响范围",
            align: "left"
          },
          {
            prop: "occurrenceTime",
            label: "发生时间",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "infoSource",
            label: "信息来源",
            align: "center"
          },
          {
            prop: "responseName",
            label: "关联响应命令单",
            align: "left",
            "min-width": "200px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='width: 100%;' class='commonTableStyle'
                      {...{
                        on: {
                          click: () => {
                            this.detailLists(row);
                          }
                        }
                      }}
                    >
                      {row.responseName}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "eventState",
            label: "状态",
            align: "center",
            "min-width": "100px",
            formatter: (row, column, cellValue, index) => {
              if (cellValue === "0") {
                return "编辑中";
              } else if (cellValue === "1") {
                return "未处理";
              } else if (cellValue === "2") {
                return "已处理";
              }
            }
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            "min-width": "150px",
            render: (h, { row }) => {
              const tbPower = this.common.isHasPower("tbr");
              return (
                <div>
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;margin:0 10px'
                      {...{
                        on: {
                          click: () => {
                            this.HanEdit(row);
                          }
                        }
                      }}
                    >
                      {row.eventState === "0" && tbPower ? "编辑" : ""}
                    </span>
                  }
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;'
                      {...{
                        on: {
                          click: () => {
                            this.detailForm(row);
                          }
                        }
                      }}
                    >
                      {row.eventState === "0" && tbPower ? "删除" : ""}
                    </span>
                  }{
                    <span
                      style='color:#3561fd;cursor:pointer;'
                      {...{
                        on: {
                          click: () => {
                            this.Disaster(row);
                          }
                        }
                      }}
                    >
                      {row.eventState === "1" && tbPower && row.sendState === "0" && row.operate === true ? "灾情任务下发" : ""}
                    </span>
                  }
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;margin:0 10px'
                      {...{
                        on: {
                          click: () => {
                            this.Disasters(row);
                          }
                        }
                      }}
                    >
                      {row.eventState === "2" && tbPower ? "灾情查看" : ""}
                    </span>
                  }
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;'
                      {...{
                        on: {
                          click: () => {
                            this.BindVideo(row);
                          }
                        }
                      }}
                    >
                      {row.eventState === "2" && tbPower ? "视频资源配置" : ""}
                    </span>
                  }
                </div>
              );
            }
          }
        ],
        // 表格样式
        tableAttr: {
          // "max-height": "430px",
          // height: "430px",
          stripe: true,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 分页信息
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
      },
      activeNames: ["1", "2", "3"], // 折叠面板默认展开列
      form: {}, // 筛选from
      pageNum: 1,
      pageSize: 10,
      // 弹窗信息
      dialogConfig: {
        title: "应急事件录入",
        isShow: false, // 弹窗显示隐藏
        btnList: [
          {
            name: "报送",
            id: "BSubmit", // 事件名
            type: "primary",
            size: "small"
          },
          {
            name: "保存",
            id: "submitForm",
            size: "small"
          },
          {
            name: "取消",
            id: "Qxiao",
            size: "small"
          }
        ]
      },
      // 折叠面板信息
      titleConfig: [
        {
          title: "信息来源",
          name: "1",
          slot: "slot1"
        },
        {
          title: "基本信息",
          name: "2",
          slot: "slot2"
        },
        {
          title: "填报信息",
          name: "3",
          slot: "slot3"
        }
      ],
      // 弹窗表单信息
      formConfig: {
        formData: [
          {
            type: "select",
            label: "信息来源",
            prop: "infoSourceCode",
            name: "infoSource",
            dic: "dic_yjxxly",
            class: "half",
            lableWidth: "130px",
            isShow: true,
            option: []
          }
          // {
          //   type: "select",
          //   label: "预警通知单",
          //   prop: "noticeId",
          //   class: "half",
          //   lableWidth: "100px",
          //   option: []
          // }
        ],
        rules: {
          infoSourceCode: [
            { required: true, message: "请选择信息来源", trigger: "change" }
          ]
        }
      },
      // 弹窗表单信息
      formConfig1: {
        formData: [
          {
            type: "input",
            label: "应急事件",
            prop: "emergencyEvent",
            class: "sjgy",
            lableWidth: "130px"
          },
          {
            type: "select",
            label: "事件类别",
            prop: "eventCode",
            name: "eventName",
            dic: "dic_sjlb",
            class: "half",
            isDisabled: false,
            lableWidth: "130px",
            option: []
          },
          {
            type: "select",
            label: "事件级别",
            prop: "eventLvCode",
            name: "eventLvName",
            dic: "dic_sjjb",
            isDisabled: false,
            class: "half",
            lableWidth: "130px",
            option: []
          },
          {
            type: "selectTree",
            label: "影响范围",
            prop: "effectRange",
            name: "geo",
            title: "影响范围选择",
            treeRef: "treeRef",
            choose: false,
            ref: "tree_select1",
            class: "half",
            multiple: true,
            lableWidth: "130px",
            option: [],
            treeData: {
              data: [],
              checked: [],
              props: {
                children: "children",
                label: "extName",
                value: "geo"
              }
            }
          },
          {
            type: "dataPicker",
            label: "发生时间",
            prop: "occurrenceTime",
            class: "half",
            dateType: "datetime",
            lableWidth: "130px"
          },
          // {
          //   elType: "dateTimePicker",
          //   id: "effectStartTime",
          //   label: "影响时间",
          //   attrs: {
          //     value: "",
          //     size: "small",
          //     type: "datetimerange",
          //     "start-placeholder": "开始日期",
          //     "end-placeholder": "结束日期",
          //     "value-format": "yyyy-MM-dd HH:mm:ss"
          //   }
          // },
          {
            type: "textarea",
            label: "事件概要",
            prop: "incidentOutline",
            class: "sjgy",
            lableWidth: "130px"
          },
          {
            type: "upload",
            label: "附件",
            prop: "ztqks",
            action: "#",
            autoUpload: true,
            lableWidth: "130px"
          }
        ],
        rules: {
          emergencyEvent: [
            {
              required: true,
              message: "请输入应急事件响应命令名称",
              trigger: "change"
            }
          ],
          eventLvCode: [
            { required: true, message: "请选择事件级别", trigger: "change" }
          ],
          effectRange: [
            { required: true, message: "请选择影响范围", trigger: "blur" }
          ],
          incidentOutline: [
            { required: true, message: "请输入事件概要", trigger: "change" }
          ],
          occurrenceTime: [
            { required: true, message: "请选择影响时间", trigger: "change" }
          ],
          eventCode: [
            { required: true, message: "请选择事件类别", trigger: "change" }
          ]
        }
      },
      // 弹窗表单信息
      formConfig2: {
        formData: [
          {
            type: "input",
            label: "填报人",
            name: "creator",
            prop: "creator",
            isDisabled: true,
            class: "third",
            lableWidth: "130px"
          },
          {
            type: "input",
            label: "单位及部门",
            class: "third",
            isDisabled: true,
            name: "createDeptName",
            prop: "createDeptName",
            lableWidth: "130px"
          },
          {
            type: "input",
            label: "填报时间",
            class: "third",
            isDisabled: true,
            prop: "createTime",
            lableWidth: "130px"
          }
        ]
      },
      xxlyOption: [],
      fid: "",
      valid: 0,
      fids: "",
      FilledBy: {},
      tex: "",
      devicePlace: "",
      bdVideoDialog: {
        // 弹窗信息
        dialogConfig: {
          title: "视频资源绑定",
          isShow: false, // 弹窗显示隐藏
          btnList: [
            {
              name: "保存",
              id: "save",
              type: "primary",
              size: "small"
            },
            {
              name: "取消",
              id: "close1",
              size: "small"
            }
          ]
        },
        // 折叠面板信息
        titleConfig: [
          {
            title: "基本信息",
            name: "1",
            slot: "slot1"
          },
          {
            title: "视频资源",
            name: "2",
            slot: "slot2"
          }
        ],
        // 弹窗表单信息
        formConfig: {
          formData: [
            {
              type: "input",
              label: "应急事件",
              prop: "emergencyEvent",
              class: "sjgy",
              isDisabled: true,
              lableWidth: "130px"
            },
            {
              type: "select",
              label: "事件类别",
              prop: "eventCode",
              name: "eventName",
              dic: "dic_sjlb",
              class: "half",
              isDisabled: true,
              lableWidth: "130px",
              option: []
            },
            {
              type: "select",
              label: "事件级别",
              prop: "eventLvCode",
              name: "eventLvName",
              dic: "dic_sjjb",
              class: "half",
              isDisabled: true,
              option: []
            },
            {
              type: "input",
              label: "影响范围",
              prop: "effectRange",
              class: "half",
              isDisabled: true,
              lableWidth: "130px"
            },
            {
              type: "dataPicker",
              label: "发生时间",
              prop: "occurrenceTime",
              class: "half",
              isDisabled: true,
              dateType: "datetime"
            },
            {
              type: "textarea",
              label: "事件概要",
              isDisabled: true,
              prop: "incidentOutline",
              class: "sjgy",
              lableWidth: "130px"
            }
          ]
        },
        formConfig1: {
          formData: [
            {
              type: "select",
              label: "影响范围",
              prop: "emergencyEvent",
              name: "eventName",
              class: "half",
              lableWidth: "130px",
              option: []
            },
            {
              type: "select",
              label: "视频资源类别",
              prop: "eventCode",
              name: "eventName",
              dic: "dic_sjlb",
              class: "half",
              option: []
            }
          ],
          rules: {
            emergencyEvent: [
              { required: true, message: "请选择责任单位及部门", trigger: "change" }
            ],
            eventCode: [
              { required: true, message: "请选择责任人", trigger: "change" }
            ]
          },
          // 表格信息
          table: {
            compRef: "spmc",
            isSequenceFlag: true,
            isShowPage: true,
            resetFlag: true,
            loading: false,
            tableData: [
              {
                videoName: "奥园东路变-正大门围墙左侧1号布控球"
              }
            ],
            columns: [
              {
                prop: "videoName",
                label: "重点关注视频资源名称",
                align: "center",
                "min-width": "200px"
              },
              {
                prop: "cz",
                label: "操作",
                align: "center",
                fixed: "right",
                "min-width": "40px",
                render: (h, { $index }) => {
                  return (
                    <div>
                      <img
                        {...{
                          class: {},
                          style: {
                            width: "16px",
                            height: "16px",
                            cursor: "pointer"
                          },
                          attrs: {
                            src: require("../../../assets/img/listReduc.png")
                          },
                          on: {
                            click: () => {
                              this.bdVideoDialog.formConfig1.table.tableData.splice($index, 1);
                            }
                          }
                        }}
                      />
                    </div>
                  );
                }
              }
            ],
            tableAttr: {
              "max-height": "470px",
              stripe: false,
              border: true,
              fit: true,
              "show-header": true,
              "highlight-current-row": true,
              "cell-style": {
                "font-size": "16px"
              },
              "header-cell-style": {
                "text-align": "center",
                "background-color": "#B1C8F9",
                border: "1px solid #ccc",
                "font-size": "16px"
              }
            }
          }
        }
      },
      props: {
        label: "name",
        children: "zones"
      },
      count: 1
    };
  },
  watch: {
    "$route.query.eventState": {
      handler() {
        if (this.$route.query.eventState == 1) {
          this.$set(this.table, "actions", [
            {
              id: "ListAddyp",
              text: "研判",
              type: "primary",
              btnAttr: { size: "small" }
            }
          ]);

        } else {
          this.$set(this.table, "actions", [
            {
              id: "dialogVisible",
              text: "新增",
              type: "primary",
              btnAttr: { size: "small" }
            }
          ]);

        }
        if (this.$route.query.eventState) {
          this.formData = this.formData2;

        } else {
          this.formData = this.formData1;
        }
        this.getInputVal();
        this.getListEmergencyDaily();
        this.list();
        // this.eventStateId = this.$route.query.eventState
        // // this.getDetail();
        // console.log(this.eventStateId)
        // // 深度监听，同时也可监听到param参数变化
      },
      deep: true
    }
  },
  mounted() {
    this.list();
    this.getUnitTree();
    this.getInputVal();
    this.getListEmergencyDaily();
    if (JSON.parse(sessionStorage.getItem("role")).roleCode === "province_company_leadership") {
      this.table.actions = [];
    }
    const FilledBy = {
      creator: JSON.parse(sessionStorage.getItem("account")).realName,
      creatorId: JSON.parse(sessionStorage.getItem("account")).id,
      createDeptId: JSON.parse(sessionStorage.getItem("org")).orgCode,
      // createDeptName: JSON.parse(sessionStorage.getItem("org")).orgName,
      createDeptName: sessionStorage.getItem("dwbmName"),
      createTime: showTime(new Date())
    };
    this.FilledBy = FilledBy;
  },
  created() {
    if (this.$route.query.id) {
      this.dialogConfig.isShow = true;
      this.type = 1;
      this.formConfig.formData = [
        {
          type: "select",
          label: "信息来源",
          prop: "infoSourceCode",
          name: "infoSource",
          dic: "dic_yjxxly",
          class: "half",
          lableWidth: "130px",
          isShow: true,
          option: []
        },
        {
          type: "select",
          label: "预警通知单",
          prop: "noticeId",
          class: "half",
          lableWidth: "130px",
          option: []
        }
      ];
      this.getNoticeOption();
      this.getInputVal();
      this.$nextTick(() => {
        this.$set(this.$refs.formComponent.form, "infoSourceCode", 6);
        this.$set(this.$refs.formComponent.form, "infoSource", "预警转响应");
        this.$set(this.$refs.formComponent.form, "noticeId", this.$route.query.id);
        this.$refs.formComponent2.form = this.FilledBy;
        detailList({ id: this.$route.query.id }).then(res => {
          this.formConfig1.formData[1].isDisabled = true;
          this.$set(this.$refs.formComponent1.form, "eventName", res.dangerName);
          this.$set(this.$refs.formComponent1.form, "eventCode", Number(res.dangerCode));
          // this.$set(this.$refs.formComponent1.form, "effectRange", res.effectRange);
          this.$nextTick(() => {
            const effectRange = [];
            const geo = [];
            res.rangeDetailVos.map(item => {
              effectRange.push(item.effectRange);
              geo.push(item.geo);
            });
            this.$set(this.$refs.formComponent1.form, "effectRange", effectRange);
            this.$set(this.$refs.formComponent1.form, "geo", geo);
          });
          // this.$set(this.$refs.formComponent1.form, "eventLvCode", Number(res.eventLvCode))
          // this.$set(this.$refs.formComponent1.form, "eventLvName", res.eventLvName)
          this.$set(this.$refs.formComponent1.form, "incidentOutline", res.eventOutline);
        });
      });
    }
    if (this.$route.query.eventState == 1) {
      this.$set(this.table, "actions", [
        {
          id: "ListAddyp",
          text: "研判",
          type: "primary",
          btnAttr: { size: "small" }
        }
      ]);

    } else {
      this.$set(this.table, "actions", [
        {
          id: "dialogVisible",
          text: "新增",
          type: "primary",
          btnAttr: { size: "small" }
        }
      ]);

    }
    if (this.$route.query.eventState) {
      this.formData = this.formData2;
    } else {
      this.formData = this.formData1;
    }
    this.getInputVal();
    this.getListEmergencyDaily();
  },
  methods: {
    // 树状接口
    getUnitTree() {
      getCityTree().then(res => {
        this.formConfig1.formData[3].treeData.data = res;
      });
    },
    previewhandleClose() {
      this.previewVisible = false;
    },
    // 影响范围
    handleNodeClick(data, node, item) {
      if (item.label === "影响范围") {
        const result = this.$refs.formComponent1.form.effectRange;
        const datas = data.children || [];
        if (datas.length > 0) {
          if (result.includes(data.extName)) return;
          else {
            this.$refs.formComponent1.form.effectRange.push(data.extName);
            this.$refs.formComponent1.form.geo.push(data.geo);
          }
        } else {
          if (result.includes(`${node.parent.data.extName}${data.extName}`) || result.includes(`${data.extName}`)) return;
          else {
            if (node.parent.data.extName) {
              this.$refs.formComponent1.form.effectRange.push(`${node.parent.data.extName}${data.extName}`);
            } else {
              this.$refs.formComponent1.form.effectRange.push(`${data.extName}`);
            }
            this.$refs.formComponent1.form.geo.push(data.geo);
          }
        }
      }
    },
    // 多选删除
    removeTag(val) {
      // this.$refs.formComponent1.form.effectRange = Array.from(new Set(this.$refs.formComponent1.form.effectRange.split(""))).join("、");
      const result = Array.from(new Set(this.$refs.formComponent1.form.effectRange));
      console.log(result);
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: "region1" }, { name: "region2" }]);
      }
      if (node.level > 3) return resolve([]);

      var hasChild;
      if (node.data.name === "region1") {
        hasChild = true;
      } else if (node.data.name === "region2") {
        hasChild = false;
      } else {
        hasChild = Math.random() > 0.5;
      }

      setTimeout(() => {
        var data;
        if (hasChild) {
          data = [{
            name: "zone" + this.count++
          }, {
            name: "zone" + this.count++
          }];
        } else {
          data = [];
        }

        resolve(data);
      }, 500);
    },
    // 删除对应文件时
    handleRemove(val, fileList) {
      this.$set(this.$refs.formComponent1, "fileList", fileList);
    },
    handleBeforeUpload(file) {
      const parmas = {
        file: file,
        directoryId: 0,
        isNew: false,
        moduleName: "EmergencyEvent"
      };
      UploadFile(this.common.convertFormData(parmas)).then(data => {
        this.$nextTick(() => {
          this.$refs.formComponent1.fileList.push({ name: data.fileName, attachId: data.id });
        });
      });
    },
    handleChange(file, fileList) {
      // const fileName = file.name;
      // const uid = file.uid;
      // const pos = fileName.lastIndexOf(".");
      // const lastName = fileName.substring(pos, fileName.length);
      // if (
      //   lastName.toLowerCase() !== ".jpg" &&
      //   lastName.toLowerCase() !== ".png" &&
      //   lastName.toLowerCase() !== ".doc" &&
      //   lastName.toLowerCase() !== ".pdf"
      // ) {
      //   this.$message({
      //     message: "文件必须为.jpg .png .doc .pdf 类型",
      //     type: "error"
      //   });
      //   for (var i = 0; i < fileList.length; i++) {
      //     if (fileList[i].uid == uid) {
      //       fileList.splice(i, 1);
      //     }
      //   }
      //   return;
      // }
      // // 限制上传文件的大小
      // const isLt = file.size / 1024 / 1024 / 50 <= 1;
      // if (!isLt) {
      //   this.$message({
      //     message: "上传文件大小不得大于50MB!",
      //     type: "error"
      //   });
      //   for (var i = 0; i < fileList.length; i++) {
      //     if (fileList[i].uid == uid) {
      //       fileList.splice(i, 1);
      //     }
      //   }
      // }
      // return isLt;
    },
    // 下载
    handlePreview(file) {
      console.log(file);
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.6)"
      });
      loadFile({ id: file.attachId }).then(res => {
        const a = document.createElement("a");
        const objectUrl = URL.createObjectURL(res);
        a.setAttribute("href", objectUrl);
        a.setAttribute("download", file.name);
        a.click();
        loading.close();
      }).catch(() => {
        loading.close();
      });
    },
    async getListEmergencyDaily() {
      const res = await selectResponse({});
      let options = [];
      options = res.map(item => {
        return {
          label: item.responseName,
          value: item.id,
          ...item
        };
      });
      this.formData[6].options = options;
    },
    // 弹窗按钮点击事件 对应id绑定事件
    handleBtn(item) {
      this[item.id]();
    },
    // 重置
    reset() {
      this.form = this.$options.data().form;
      this.$refs.gjxm.paginationAtrrsInner["current-page"] = 1;
      this.list();
    },
    // 检索
    async query() {
      let sta = "";
      if (this.$route.query.eventState) {
        sta = this.$route.query.eventState;
      } else {
        sta = this.form.eventState;
      }
      const parmas = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        eventState: sta,
        effectRange: this.form.effectRange,
        infoSourceCode: this.form.infoSourceCode,
        // noticeId: this.form.noticeId,
        responseId: this.form.noticeId,
        eventLvCode: this.form.eventLvCode, // 事件级别
        eventCode: this.form.eventCode, // 事件类别
        occurrenceStartTime: this.form.effectStartTime ? this.form.effectStartTime[0] : "", // 开始时间
        occurrenceEndTime: this.form.effectStartTime ? this.form.effectStartTime[1] : "", // 结束时间
        emergencyEvent: this.form.emergencyEvent // 应急事件
      };
      const res = await listPageEmergencyEvent(parmas);
      this.table.tableData = res.data;
      this.paginationAtrrs.total = res.total;
    },
    // 预警转响应
    async ChangeResponseData(val, item) {
      console.log(val, "val");
      this.valid = val;
      if (item.label === "信息来源") {
        if (val === 6) {
          this.formConfig.formData = [
            {
              type: "select",
              label: "信息来源",
              prop: "infoSourceCode",
              name: "infoSource",
              dic: "dic_yjxxly",
              class: "half",
              lableWidth: "130px",
              isShow: true,
              option: []
            },
            {
              type: "select",
              label: "预警通知单",
              prop: "noticeId",
              class: "half",
              lableWidth: "130px",
              option: []
            }
          ];
          this.getNoticeOption();
          this.getInputVal();
          // this.$refs.formComponent.form.noticeId = null
        } else {
          this.formConfig.formData = [
            {
              type: "select",
              label: "信息来源",
              name: "infoSource",
              prop: "infoSourceCode",
              dic: "dic_yjxxly",
              class: "half",
              lableWidth: "130px",
              isShow: true,
              option: []
            }
          ];
          this.getInputVal();
          this.formConfig1.formData[1].isDisabled = false;
          // if (this.$refs.formComponent1.form.effectRange == []) {
          //   this.$refs.formComponent1.form = this.$refs.formComponent1.$options.data().form;
          //   this.$nextTick(() => {
          //     this.$refs.formComponent1.$refs.formInlines.clearValidate();

          //   });
          // // }
          // this.$set(this.$refs.formComponent1.form, "eventName", "");
          // this.$set(this.$refs.formComponent1.form, "eventCode", "");
          this.$set(this.$refs.formComponent1.form, "effectRange", []);
          this.$set(this.$refs.formComponent1.form, "geo", []);
          // this.$set(this.$refs.formComponent1.form, "incidentOutline", "");
          // this.$set(this.$refs.formComponent1.form, "incidentOutline", "");
          // this.$set(this.$refs.formComponent1.form, "eventName", "");
          // this.$set(this.$refs.formComponent1.form, "eventCode", "");
          // this.$set(this.$refs.formComponent1.form, "effectRange", "");
          // this.$set(this.$refs.formComponent1.form, "geo", "");
          // this.formConfig1.formData[3].isDisabled = false;
          // this.$set(this.$refs.formComponent1.form, "eventLvCode", Number(res.eventLvCode))
          // this.$set(this.$refs.formComponent1.form, "eventLvName", res.eventLvName)
          // this.$set(this.$refs.formComponent1.form, "incidentOutline", "");
        }
      } else if (item.label === "预警通知单") {
        this.formConfig1.formData[1].isDisabled = true;
        const res = await detailList({ id: val });
        this.$set(this.$refs.formComponent1.form, "eventName", res.dangerName);
        this.$set(this.$refs.formComponent1.form, "eventCode", Number(res.dangerCode));
        this.$nextTick(() => {
          const effectRange = [];
          const geo = [];
          res.rangeDetailVos.map(item => {
            effectRange.push(item.effectRange);
            geo.push(item.geo);
          });
          this.$set(this.$refs.formComponent1.form, "effectRange", effectRange);
          this.$set(this.$refs.formComponent1.form, "geo", geo);
        });

        // this.$set(this.$refs.formComponent1.form, "eventLvCode", Number(res.eventLvCode))
        // this.$set(this.$refs.formComponent1.form, "eventLvName", res.eventLvName)
        this.$set(this.$refs.formComponent1.form, "incidentOutline", res.eventOutline);
      }
    },
    getNoticeOption() {
      this.formConfig.formData.forEach((item) => {
        if (item.label === "预警通知单") {
          EmergencyEventgetChangeResponseData().then(res => {
            const option = res.map((item) => {
              return {
                label: item.warningNoticeName,
                value: item.id
              };
            });
            item.option = option;
          });
          // }
        }
      });

    },
    // 保存
    async submitForm() {
      this.$refs.formComponent.isValidate();
      this.$refs.formComponent1.isValidate();
      const flag = this.$refs.formComponent.flag;
      const flag1 = this.$refs.formComponent1.flag;
      if (flag && flag1) {
        const list = this.$refs.formComponent1.fileList;
        const newList = [];
        list.forEach(item => {
          newList.push(
            {
              attachName: item.name,
              attachId: item.attachId
            }
          );
        });
        const parmas = {
          creator: JSON.parse(sessionStorage.getItem("account")).realName,
          creatorId: JSON.parse(sessionStorage.getItem("account")).id,
          createDeptId: JSON.parse(sessionStorage.getItem("org")).id,
          createDeptName: sessionStorage.getItem("dwbmName"),
          modifier: JSON.parse(sessionStorage.getItem("account")).realName,
          effectRange: this.$refs.formComponent1.form.effectRange.join("、"),
          geo: this.$refs.formComponent1.form.geo.join("、"),
          emergencyEvent: this.$refs.formComponent1.form.emergencyEvent,
          eventLvCode: this.$refs.formComponent1.form.eventLvCode,
          eventCode: this.$refs.formComponent1.form.eventCode,
          eventLvName: this.$refs.formComponent1.form.eventLvName,
          eventName: this.$refs.formComponent1.form.eventName,
          incidentOutline: this.$refs.formComponent1.form.incidentOutline,
          infoSourceCode: this.$refs.formComponent.form.infoSourceCode,
          infoSource: this.$refs.formComponent.form.infoSource,
          occurrenceTime: this.$refs.formComponent1.form.occurrenceTime,
          noticeId: this.$refs.formComponent.form.noticeId,
          attachInfo: newList
        };
        if (this.type === 1) {
          const res = await SaveEmergencyEvent(parmas);
          if (res) {
            this.$message({
              message: "保存成功",
              type: "success"
            });
            this.list();
            this.$router.push({ query: { eventState: this.$route.query.eventState } });
            this.dialogConfig.isShow = false;

          }
        } else if (this.type === 2) {
          parmas.id = this.fid;
          const res = await EmergencyEventgetSubmit(parmas);
          if (res) {
            this.$message({
              message: "报送成功",
              type: "success"
            });
            this.$router.push({ query: { eventState: this.$route.query.eventState } });
            this.dialogConfig.isShow = false;
            this.list();
          }
        } else {
          parmas.id = this.fid;
          const res = await EmergencyEventgetUpdById(parmas);
          if (res) {
            this.$message({
              message: "修改成功",
              type: "success"
            });
            this.list();
            this.$router.push({ query: { eventState: this.$route.query.eventState } });
            this.dialogConfig.isShow = false;
          }
        }
      }
    },
    // 报送
    async BSubmit() {
      this.type = 2;
      this.submitForm();
    },
    // 取消
    Qxiao() {
      this.$refs.formComponent1.fileList = [];
      this.$refs.formComponent.form = this.$refs.formComponent.$options.data().form;
      this.$refs.formComponent1.form = this.$refs.formComponent1.$options.data().form;
      this.$refs.formComponent2.form = this.$refs.formComponent2.$options.data().form;
      this.$nextTick(() => {
        this.$refs.formComponent.$refs.formInlines.clearValidate();
        this.$refs.formComponent1.$refs.formInlines.clearValidate();
        this.$refs.formComponent2.$refs.formInlines.clearValidate();

      });
      if (this.$route.query.type === 1) {
        this.$router.push({
          name: "NoticeList"
        });
      }
      if (this.$route.query.type === 2) {
        this.$router.push({
          name: "AdjustmentList",
          query: {
            noticeState: 3
          }
        });
      }
      this.$router.push({ query: { eventState: this.$route.query.eventState } });
      this.dialogConfig.isShow = false;
    },
    // 弹窗关闭图标
    close() {
      if (this.$route.query.type === 1) {
        this.$router.push({
          name: "NoticeList"
        });
      }
      if (this.$route.query.type === 2) {
        this.$router.push({
          name: "AdjustmentList",
          query: {
            noticeState: 3
          }
        });
      }
      this.$refs.formComponent1.fileList = [];
      this.$router.push({ query: { eventState: this.$route.query.eventState } });
      this.formConfig.formData = [
        {
          type: "select",
          label: "信息来源",
          name: "infoSource",
          prop: "infoSourceCode",
          dic: "dic_yjxxly",
          class: "half",
          lableWidth: "130px",
          isShow: true,
          option: []
        }
      ];
      this.getInputVal();
      this.$refs.formComponent.form = this.$refs.formComponent.$options.data().form;
      this.$refs.formComponent1.form = this.$refs.formComponent1.$options.data().form;
      this.$refs.formComponent2.form = this.$refs.formComponent2.$options.data().form;
      this.$nextTick(() => {
        this.$refs.formComponent.$refs.formInlines.clearValidate();
        this.$refs.formComponent1.$refs.formInlines.clearValidate();
        this.$refs.formComponent2.$refs.formInlines.clearValidate();

      });
      this.dialogConfig.isShow = false;
    },
    // 获取下拉框数据
    getInputVal() {
      this.formData.forEach((item) => {
        if (item.dic) {
          getDictByGroupEmergency({ groupCode: item.dic }).then(res => {
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: Number(item.dicCode)
              };
            });
            item.options = option;
          });
        }
      });
      this.formConfig.formData.forEach((item) => {
        if (item.dic) {
          getDictByGroupEmergency({ groupCode: item.dic }).then(res => {
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: Number(item.dicCode)
              };
            });
            item.option = option;
          });
        }
      });
      this.formConfig1.formData.forEach((item) => {
        if (item.dic) {
          getDictByGroupEmergency({ groupCode: item.dic }).then(res => {
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: Number(item.dicCode)
              };
            });
            item.option = option;
          });
        }
      });
    },
    // 列表
    async list(val) {
      let parmas = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        eventState: this.$route.query.eventState
      };
      if (val) {
        parmas = val;
      }
      const res = await listPageEmergencyEvent(parmas);
      this.table.tableData = res.data;
      this.paginationAtrrs.total = res.total;
    },
    // 抛出列表按钮
    onActionClick(item, index) {
      this[item.id](); // 调用按钮对应方法
    },
    // 新增
    dialogVisible() {
      this.dialogConfig.isShow = true;
      this.formConfig1.formData[1].isDisabled = false;
      this.type = 1;
      this.$nextTick(() => {
        this.$refs.formComponent2.form = this.FilledBy;
        this.$set(this.$refs.formComponent1.form, "effectRange", []);
        this.$set(this.$refs.formComponent1.form, "geo", []);
      });
    },
    // 详情
    detailList(id) {
      this.$router.push({
        name: "EmergencyDetail",
        query: { id: id.id }
      });
    },
    //
    // 关联响应命令单详情
    detailLists(id) {
      this.$router.push({
        name: "EmergencyResponseinfo",
        query: { id: id.responseId }
      });
    },
    // 研判
    ListAddyp() {
      if (this.multipleSelection.length <= 0) {
        this.$message({
          message: "请至少选择一条数据",
          type: "warning"
        });
      } else if (this.multipleSelection.length >= 1) {
        this.isSame = true;
        const firstQdr = this.multipleSelection[0].eventName;
        const operate = this.multipleSelection[0].operate;
        try {
          this.multipleSelection.forEach((item, index) => {
            if (item.eventName != firstQdr || item.eventState !== "1" || item.isJudge !== "0") {
              this.$message({
                message: "请选择险情类别相同(且为状态为已报送,未进行预警研判)的进行研判！",
                type: "warning"
              });
              this.isSame = false;
              throw new Error("error");
            } else if (item.operate === false) {
              this.$message({
                message: "禁止操作其他单位的单据！",
                type: "warning"
              });
              this.isSame = false;
              throw new Error("error");
            } else if (item.operate != operate) {
              this.$message({
                message: "选择的单据包含其他单位的单据，请检查！",
                type: "warning"
              });
              this.isSame = false;
              throw new Error("error");
            }
          });
        } catch (error) {
          console.log(error);
        }
        var str = "";
        for (var i = 0; i < this.multipleSelection.length; i++) {
          str += this.multipleSelection[i].id + ",";
        }
        // 去掉最后一个逗号(如果不需要去掉，就不用写)
        if (str.length > 0) {
          str = str.substr(0, str.length - 1);
        }
        if (this.isSame) {
          console.log(this.fids);
          this.$router.push({
            name: "ToTheHomeList",
            query: {
              id: str,
              type: 1
            }
          });
        }
      }
    },
    // 选择器
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 编辑
    HanEdit(id) {
      this.dialogConfig.isShow = true;
      EmergencyEventgetById({ id: id.id }).then(res => {
        if (Number(res.infoSourceCode) === 6) {
          this.formConfig.formData = [
            {
              type: "select",
              label: "信息来源",
              name: "infoSource",
              prop: "infoSourceCode",
              dic: "dic_yjxxly",
              class: "half",
              lableWidth: "130px",
              isShow: true,
              option: []
            },
            {
              type: "select",
              label: "预警通知单",
              prop: "noticeId",
              class: "half",
              lableWidth: "130px",
              option: []
            }
          ];
          this.getNoticeOption();
          this.getInputVal();
          this.$nextTick(() => {
            this.$set(this.$refs.formComponent.form, "infoSourceCode", 6);
            this.$set(this.$refs.formComponent.form, "noticeId", res.noticeId);
          });
        }
        this.fid = res.id;
        this.type = 0;
        this.$set(this.$refs.formComponent1.form, "geo", res.geo.split("、"));
        this.$set(this.$refs.formComponent.form, "infoSourceCode", Number(res.infoSourceCode));
        this.$set(this.$refs.formComponent.form, "infoSource", res.infoSource);
        this.$set(this.$refs.formComponent1.form, "eventName", res.eventName);
        this.$set(this.$refs.formComponent1.form, "eventCode", Number(res.eventCode));
        this.$set(this.$refs.formComponent1.form, "emergencyEvent", res.emergencyEvent);
        this.$set(this.$refs.formComponent1.form, "effectRange", res.effectRange.split("、"));
        this.$set(this.$refs.formComponent1.form, "eventLvCode", Number(res.eventLvCode));
        this.$set(this.$refs.formComponent1.form, "eventLvName", res.eventLvName);
        this.$set(this.$refs.formComponent1.form, "occurrenceTime", res.occurrenceTime);
        this.$set(this.$refs.formComponent1.form, "incidentOutline", res.incidentOutline);
        const list = res.attachInfo;
        const newList = [];
        list.forEach(item => {
          newList.push({
            name: item.attachName,
            attachId: item.attachId
          });
        });
        this.$set(this.$refs.formComponent1, "fileList", newList);
        this.$set(this.$refs.formComponent2.form, "createDeptName", res.createDeptName);
        this.$set(this.$refs.formComponent2.form, "createTime", res.createTime);
        this.$set(this.$refs.formComponent2.form, "creator", res.creator);
      });
    },

    // 列表删除
    detailForm(id) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        EmergencyEventgetdeleteById({
          id: id.id
        }).then(data => {
          if (data) {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.list();
          }
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    },
    // 删除
    // 分页
    handleSizeChange(val) {
      let sta = "";
      if (this.$route.query.eventState) {
        sta = this.$route.query.eventState;
      } else {
        sta = this.form.eventState;
      }
      const parmas = {
        pageNum: val["current-page"],
        pageSize: val["page-size"],
        eventState: sta,
        effectRange: this.form.effectRange,
        infoSourceCode: this.form.infoSourceCode,
        // noticeId: this.form.noticeId,
        responseId: this.form.noticeId,
        eventLvCode: this.form.eventLvCode, // 事件级别
        eventCode: this.form.eventCode, // 事件类别
        occurrenceStartTime: this.form.effectStartTime ? this.form.effectStartTime[0] : "", // 开始时间
        occurrenceEndTime: this.form.effectStartTime ? this.form.effectStartTime[1] : "", // 结束时间
        emergencyEvent: this.form.emergencyEvent // 应急事件
      };
      this.list(parmas);
    },
    // 灾情任务下发
    Disaster(id) {
      this.$router.push({
        name: "DisasterReportList",
        query: { id: id.id, type: 1 }
      });
    },
    // 灾情信息
    Disasters(row) {
      this.currentId = row.id;
      this.previewVisible = true;
      /* this.$router.push({
    name: "DisasterReportList"
    // query: { id: id.id, isShow: true }
  }); */
    },
    BindVideo(row) {
      console.log(111111111111111);
      EmergencyEventgetById({ id: row.id }).then(res => {
        console.log(res);
        this.$refs.videoForm.form = res;
      });
      this.bdVideoDialog.dialogConfig.isShow = true;
    },
    close1() {
      this.bdVideoDialog.dialogConfig.isShow = false;
    }
  }
};
</script>

<style scoped lang="less">
@import "../../../assets/style/common.less";
@import "../../../assets/style/ComponentStyle.less";
@import "../../../assets/style/pop-upNotification.less";

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}

.EmergencyList :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td) {
  background-color: #f8f9f8;
  /*隔行变色*/
}

//鼠标悬浮样式
:deep(tr.hover-row) {

  &,
  &.el-table__row--striped {

    &,
    &.current-row {
      >td.el-table__cell {
        background: none;
      }
    }
  }
}

:deep(.el-dialog) {
  height: 70% !important;
  margin-top: 22vh !important;

  .dialog-footer {
    position: absolute;
    width: 20%;
    bottom: 10px;
    left: 40%;
    display: flex;
    justify-content: space-around;
  }
}

.box {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}

.videoDiv {
  justify-content: space-between;
  width: 100%;
  height: 420px;

  > :first-child {
    width: 56%;
  }

  .device {
    width: 43%;
    height: 100%;

    .deviceMain {
      width: 99%;
      height: 413px;
      border: 2px solid #3270ff;
      border-radius: 4px;
      overflow: hidden;
      background-color: rgba(213, 240, 255, 0.2);

      .deviceTitle {
        height: 31px;
        line-height: 31px;
        letter-spacing: 1px;
        font-size: 18px;
        font-weight: bold;
        padding-left: 15px;
        color: #d5f0ff;
        background-color: rgba(38, 92, 255, 0.45);
      }

      .deviceSearch {
        width: 93%;
        margin: 10px auto;

        :deep(.el-input__inner) {
          height: 35px;
          background-color: rgba(13, 38, 82, 0.58);
          border: 2px solid #008dff;
          color: #ccc;
        }
      }

      .videoTree {
        height: 330px;
        margin: 0 3.5%;
        overflow-y: auto;
      }

      :deep(.el-tree) {
        background: transparent;

        .el-tree-node:focus>.el-tree-node__content {
          background-color: transparent;
        }

        .el-tree-node__content:hover {
          background-color: transparent;
        }

        .el-tree-node__label {
          font-weight: bold;
          color: #008dff;
        }

        .el-tree-node__content {
          height: 42px;
          border-bottom: 1px solid #f2f2f2;
        }
      }
    }
  }
}

:deep(.el-tag__close) {
  background-color: rgba(185, 206, 250) !important;
  color: #333333 !important;
  border-radius: 0px !important;
  height: 25px;
  font-size: 15px !important;
  border: none !important;
}

:deep(.el-tag.el-tag--info) {
  background-color: rgba(185, 206, 250) !important;
  color: #333333 !important;
  border-radius: 0px !important;
  height: 25px;
  font-size: 15px !important;
  border: none !important;
}

.EmergencyList {
  height: 97% !important;
}
</style>
